<template>
    <div class="app-container">
        <el-table :key="tableKey" v-loading="listLoading" :data="app_list" border fit highlight-current-row style="width: 100%">
            <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80">
                <template slot-scope="{ $index }">
                    <span>{{ $index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('应用')" prop="name" align="center">
                <template slot-scope="{ row }">
                    <div>{{ row.name }}</div>
                    <div v-if="row.identity == 'open-cms'">
                        <a href="https://gitee.com/navlange/cms.git" style="text-decoration: underline; color: #F27931">安装</a>
                    </div>
                    <div v-if="row.identity == 'open-shop'">
                        <a href="https://gitee.com/navlange/open-shop.git" style="text-decoration: underline; color: #F27931">安装</a>
                    </div>
                    <div v-if="row.identity == 'open-erp'">
                        <a href="https://gitee.com/navlange/open-erp.git" style="text-decoration: underline; color: #F27931">安装</a>
                    </div>
                    <div v-if="row.identity == 'open-iot'">
                        <a href="https://gitee.com/navlange/open-iot.git" style="text-decoration: underline; color: #F27931">安装</a>
                    </div>
                </template>
            </el-table-column>
            <el-table-column :label="$t('状态')" prop="status" align="center" width="80">
                <template slot-scope="{ row }">
                    <div>{{ trans_status(row.status) }}</div>
                </template>
            </el-table-column>
            <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
                <template slot-scope="{ row, $index }">
                    <el-button size="mini" type="primary" @click="checkInstall(row, $index)">
                        {{ $t("查看安装") }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
import { check, list } from '@/app/api/install'

export default {
    data() {
        return {
            app_list: [
                {
                    identity: 'open-cms',
                    name: 'CMS内容管理',
                    status: '0'
                },
                {
                    identity: 'open-shop',
                    name: '电子商城',
                    status: '0'
                },
                {
                    identity: 'open-erp',
                    name: 'ERP系统',
                    status: '0'
                },
                {
                    identity: 'open-iot',
                    name: 'IOT系统',
                    status: '0'
                }
            ],
            total: 0,
            tableKey: 0,
            listLoading: false,
            listQuery: {
                page: 1,
                limit: 20,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: '+id'
            }
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            list().then(res => {
                res.data.items.forEach(element => {
                    if (element.identity == 'open-cms') {
                        for (var i = 0; i < this.app_list.length; i++) {
                            if (this.app_list[i].identity == 'open-cms') {
                                if (element.status == '1') {
                                    this.app_list[i].status = '1'
                                } else {
                                    this.app_list[i].status = '0'
                                }
                                break
                            }
                        }
                    }
                    if (element.identity == 'open-shop') {
                        for (var i = 0; i < this.app_list.length; i++) {
                            if (this.app_list[i].identity == 'open-shop') {
                                if (element.status == '1') {
                                    this.app_list[i].status = '1'
                                } else {
                                    this.app_list[i].status = '0'
                                }
                                break
                            }
                        }
                    }
                    if (element.identity == 'open-erp') {
                        for (var i = 0; i < this.app_list.length; i++) {
                            if (this.app_list[i].identity == 'open-erp') {
                                if (element.status == '1') {
                                    this.app_list[i].status = '1'
                                } else {
                                    this.app_list[i].status = '0'
                                }
                                break
                            }
                        }
                    }
                    if (element.identity == 'open-iot') {
                        for (var i = 0; i < this.app_list.length; i++) {
                            if (this.app_list[i].identity == 'open-iot') {
                                if (element.status == '1') {
                                    this.app_list[i].status = '1'
                                } else {
                                    this.app_list[i].status = '0'
                                }
                                break
                            }
                        }
                    }
                })
            })
        },
        trans_status(status) {
            if (status == '1') {
                return '已安装'
            }
            return '未安装'
        },
        checkInstall(row, index) {
            check({
                identity: row.identity
            }).then(res => {
                this.getData()
                if (res.errorCode == 200) {
                    this.$notify({
                        title: '成功',
                        message: '已安装',
                        type: 'success',
                        duration: 2000
                    })
                } else {
                    this.$notify({
                        title: '失败',
                        message: res.errorMsg,
                        type: 'error',
                        duration: 2000
                    })
                }
            })
        }
    }
}
</script>

<style>
.img-thumb {
    width: 30px;
    height: 30px;
}
</style>
